<template>
  <el-dialog v-model="dialogVisible" title="查看成长发展记录" width="40%" @close="handleClose" class="growth-record-dialog">
    <!-- 表格形式展示内容 -->
    <div class="table-container">
      <!-- 基本信息表格 -->
      <div class="table-section">
        <table class="info-table">
          <tbody>
            <tr>
              <td class="label" colspan="6">基本信息</td>
            </tr>
            <tr>
              <td class="key">姓名</td>
              <td class="value">{{ basicInfo.name }}</td>
              <td class="key">学校</td>
              <td class="value">{{ basicInfo.school }}</td>
            </tr>
            <tr>
              <td class="key">学期</td>
              <td class="value">{{ basicInfo.semester }}</td>
              <td class="key">身份证件号</td>
              <td class="value">{{ basicInfo.idCard }}</td>
            </tr>
            <tr>
              <td class="key">学生标识码</td>
              <td class="value">{{ basicInfo.studentCode }}</td>
              <td class="key">评价指标</td>
              <td class="value">{{ basicInfo.parent_name }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="table-section">
        <table class="info-table">
          <tbody>
            <tr>
              <td class="label" colspan="8">成长发展记录</td>
            </tr>
            <!-- 使用辅助函数处理evalrecord数据 -->
            <tr v-for="(item, index) in getEvalrecordArray(basicInfo.evalrecord)" :key="index">
              <td class="key">{{ item.displayName }}</td>
              <td class="value" colspan="3">{{ item.value }}</td>
            </tr>
          </tbody>
        </table>
      </div>



      <!-- 证明材料表格 -->
      <div class="table-section">
        <table class="info-table">
          <tbody>
            <tr>
              <td class="label" colspan="4">证明材料</td>
            </tr>
            <tr>
              <td class="value" colspan="4">
                <img :src="proofMaterial" alt="证明材料" class="proof-image" @click="showFullImage" />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 全屏图片预览 -->
  <el-dialog v-model="fullscreenImageVisible" :show-close="true" width="90%" height="90%" :fullscreen="true"
    class="fullscreen-image-dialog">
    <div class="fullscreen-image-container">
      <img :src="proofMaterial" alt="证明材料全屏预览" class="fullscreen-image" />
    </div>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits, ref, watchEffect, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'

// 接收父组件传递的参数
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  basicInfo: {
    type: Object,
    default: () => ({})
  },
  growthRecord: {
    type: Object,
    default: () => ({})
  },
  proofMaterial: {
    type: String,
    default: ''
  }
})

// 触发关闭事件，通知父组件更新显隐状态
const emit = defineEmits(['update:visible'])

// 弹窗显隐状态
let dialogVisible = ref(false)
// 全屏图片预览状态
const fullscreenImageVisible = ref(false)
// 是否为移动端
const isMobile = ref(false)


// 修改辅助函数，使其能够智能处理不同的属性命名方式
const getEvalrecordArray = (evalrecord) => {
  // 检查输入是否有效
  if (!evalrecord) {
    return [];
  }

  // 如果输入是字符串，尝试解析为JSON对象
  let evalrecordObj = evalrecord;
  if (typeof evalrecord === 'string') {
    try {
      evalrecordObj = JSON.parse(evalrecord);
    } catch (error) {
      console.error('解析evalrecord失败:', error);
      return [];
    }
  }

  // 检查解析后的对象是否有效
  if (typeof evalrecordObj !== 'object' || evalrecordObj === null) {
    return [];
  }

  // 处理数组情况（如果evalrecord是数组）
  if (Array.isArray(evalrecordObj)) {
    return evalrecordObj.flatMap(item => getEvalrecordArray(item));
  }

  // 将对象转换为数组，保持原始属性名称
  return Object.entries(evalrecordObj).map(([key, value]) => ({
    prop: key,
    // 保持原始属性名称，不进行强制映射
    displayName: key,
    value: value
  }));
}


// 监听 visible 变化，同步更新 dialogVisible
watchEffect(() => {
  dialogVisible.value = props.visible
})

// 关闭弹窗时通知父组件
const handleClose = () => {
  emit('update:visible', false)
}

// 显示全屏图片
const showFullImage = () => {
  if (proofMaterial) {
    fullscreenImageVisible.value = true
  } else {
    ElMessage.warning('暂无证明材料图片')
  }
}

// 检测是否为移动端
const checkIsMobile = () => {
  isMobile.value = window.innerWidth <= 768
}

// 组件挂载时检查屏幕尺寸
onMounted(() => {
  checkIsMobile()
  // 添加窗口大小变化监听
  window.addEventListener('resize', checkIsMobile)
})

// 组件卸载时移除监听
onUnmounted(() => {
  window.removeEventListener('resize', checkIsMobile)
})
</script>

<style scoped>
/* 对话框容器样式 */
.growth-record-dialog {
  --el-dialog-padding-primary: 16px;
}

/* 表格容器样式 */
.table-container {
  width: 100%;
}

/* 表格区块样式 */
.table-section {
  margin-top: -1px;
  border: 0px solid #ebeef5;
  overflow: hidden;
}

/* 表格样式 */
.info-table {
  width: 100%;
  border-collapse: collapse;
}

.info-table td {
  padding: 8px 12px;
  border: 1px solid #ebeef5;
  text-align: left;
}

/* 标签单元格样式 */
.label {
  background-color: #f5f7fa;
  font-weight: 600;
  color: #606266;
  font-size: 14px;
  width: 100px;
}

/* 键名单元格样式 */
.key {
  background-color: #fafafa;
  color: #606266;
  font-size: 14px;
  width: 100px;
}

/* 值单元格样式 */
.value {
  color: #303133;
  font-size: 14px;
  word-break: break-word;
}

/* 证明材料图片容器 */
.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  background-color: #fafafa;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.image-container:hover {
  background-color: #f0f0f0;
}

/* 证明材料图片样式 */
.proof-image {
  max-width: 100%;
  max-height: 200px;
  border-radius: 4px;
}

/* 全屏图片对话框样式 */
.fullscreen-image-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fullscreen-image-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
}

.fullscreen-image {
  max-width: 100%;
  max-height: 100vh;
  object-fit: contain;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .growth-record-dialog {
    --el-dialog-padding-primary: 12px;
    width: 90% !important;
  }

  .info-table td {
    padding: 6px 8px;
    font-size: 13px;
  }

  .label,
  .key {
    width: 80px;
  }

  .proof-image {
    max-height: 150px;
  }

  .dialog-footer {
    display: flex;
    justify-content: center;
  }
}
</style>